<template>
  <view class="viewport">
    <fui-nav-bar background="#0052D9" title="筛选" color="#fff" @leftClick="leftClick">
      <fui-icon color="#fff" name="arrowleft"></fui-icon>
    </fui-nav-bar>

    <view class="warp">
      <view class="ul">
        <view class="li">
          <fui-input label="入库主题" borderTop placeholder="请输入"></fui-input>
          <fui-input v-model="audit" label="入库类型" :bottomLeft="0" placeholder="请选择">
            <fui-icon :size="50" name="arrowright" @click="showA = true"></fui-icon>
          </fui-input>
          <fui-input v-model="audit1" label="仓库名称" :bottomLeft="0" placeholder="请选择">
            <fui-icon :size="50" name="arrowright" @click="showD = true"></fui-icon>
          </fui-input>
          <fui-input v-model="endTime" label="入库日期" :bottomLeft="0" placeholder="请选择">
            <fui-icon :size="50" name="arrowright" @click="showC = true"></fui-icon>
          </fui-input>
					<fui-input v-model="audit2" label="入库人员" :bottomLeft="0" placeholder="请选择">
					  <fui-icon :size="50" name="arrowright" @click="showE = true"></fui-icon>
					</fui-input>
          <fui-input v-model="audit3" label="申请人" :bottomLeft="0" placeholder="请选择">
            <fui-icon :size="50" name="arrowright" @click="showF = true"></fui-icon>
          </fui-input>
        </view>
      </view>
      <fui-picker :options="options" :show="show" @change="change" @cancel="cancel"></fui-picker>
      <fui-picker :options="optionsA" :show="showA" @change="changeA" @cancel="cancelA"></fui-picker>
      <fui-picker :options="optionsB" :show="showD" @change="changeD" @cancel="cancelD"></fui-picker>
			<fui-picker :options="optionsE" :show="showE" @change="changeE" @cancel="cancelE"></fui-picker>
			<fui-picker :options="optionsF" :show="showF" @change="changeF" @cancel="cancelF"></fui-picker>
      <up-calendar :show="showB" :mode="mode" @confirm="confirm" @close="showB = false"></up-calendar>
      <up-calendar :show="showC" :mode="mode" @confirm="confirmC" @close="showC = false"></up-calendar>
    </view>
    <view class="footer">
      <view class="reset" @click="reset">重置</view>
      <view class="reset confirm">确定</view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
const leftClick = () => {
  uni.navigateBack();
};
const rightClick = () => {};
// 紧急程度
const show = ref(false);
const emergency = ref('');
const options = ref(['全部', '类型1', '类型2', '类型3', '类型4']);
// 审核状态
const showA = ref(false);
const audit = ref('');
const optionsA = ref(['全部', '入库类型1', '入库类型2', '入库类型3', '入库类型4']);

const showD = ref(false);
const audit1 = ref('');
const optionsB = ref(['仓库名称1', '仓库名称2', '仓库名称3', '仓库名称4']);

const showE = ref(false);
const audit2 = ref('');
const optionsE = ref(['入库人员1', '入库人员2', '入库人员3', '入库人员4']);

const showF = ref(false);
const audit3 = ref('');
const optionsF = ref(['申请人1', '申请人2', '申请人3', '申请人4']);

const change = (e) => {
  show.value = false;
  emergency.value = e.value;
  console.log(e, '5656');
};
const changeA = (e) => {
  audit.value = e.value;
  showA.value = false;
  console.log(e);
};
const changeD = (e) => {
  audit1.value = e.value;
  showD.value = false;
  console.log(e);
};

const changeE = (e) => {
  audit2.value = e.value;
  showE.value = false;
  console.log(e);
};

const changeF = (e) => {
  audit3.value = e.value;
  showF.value = false;
  console.log(e);
};

const cancel = () => {
  show.value = false;
};
const cancelA = () => {
  showA.value = false;
};
const cancelD = () => {
  showD.value = false;
};
const cancelE = () => {
  showE.value = false;
};
const cancelF = () => {
  showF.value = false;
};
// 时间选择器开始
const startTime = ref('');
const showB = ref(false);
const mode = ref('single');
const confirm = (e) => {
  startTime.value = e['0'];
  console.log(e, '555');
  showB.value = false;
};

//结束时间选择器
const endTime = ref('');
const showC = ref(false);
const confirmC = (e) => {
  endTime.value = e['0'];
  console.log(e, '555');
  showC.value = false;
};

//重置
const reset = () => {
  emergency.value = '';
  audit.value = '';
  startTime.value = '';
  endTime.value = ''; 
	audit1.value = '';
	audit2.value = '';
	audit3.value = '';
};
</script>

<style lang="scss" scoped>
page {
  height: 100%;
}
.viewport {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.warp {
  flex: 1;
}
.footer {
  display: flex;
  .reset {
    width: 50%;
    display: flex;
    height: 100rpx;
    align-items: center;
    justify-content: space-around;
    border: 1rpx solid #ccc;
    color: #0052d9;
  }

  .confirm {
    color: #fff;
    background-color: #0052d9;
  }
}
</style>
